class Magnifier{
		constructor(newSmallBox,newBigBox,newMask) {
		this.oimg=newSmallBox;
		this.big=newBigBox;
		this.mask=newMask;
		}
	onmouseover(){
		let that=this;
		this.oimg.onmouseover=function(){
			that.mask.style.display="block";
			that.big.style.display="block";
		}
	}
	onmouseout(){
		let that=this;
		this.oimg.onmouseout=function(){
			that.mask.style.display="none";
			that.big.style.display="none";
		}
	}
	onmousemove(){
		let that=this;
		this.oimg.onmousemove=function(evt){
			let e=evt||event;
			// 鼠标放中心
			let left=e.pageX-that.oimg.offsetLeft-that.mask.offsetWidth/2;
			let top=e.pageY-that.oimg.offsetTop-that.mask.offsetHeight/2;
			// 边界
			if(left<0){
				left=0;
			}
			let maxLeft=that.oimg.offsetWidth-that.mask.offsetWidth;
			if(left>maxLeft){
				left=maxLeft;
			}
			if(top<0){
				top=0;
			}
			let maxTop=that.oimg.offsetHeight-that.mask.offsetHeight;
			if(top>maxTop){
				top=maxTop;
			}
			// 记录mask的位置
			that.mask.style.left=left+"px";
			that.mask.style.top=top+"px";
			let x=that.big.offsetWidth*left/that.mask.offsetWidth;
			let y=that.big.offsetHeight*top/that.mask.offsetHeight;
			// 背景图片定位
			that.big.style.backgroundPositionX=-x+"px";
			that.big.style.backgroundPositionY=-y+"px";
		}
	}
	
}
	let ooimg=document.querySelector('.oimg');
	let obig=document.querySelector('.big');
	let omask=document.querySelector('.mask');
	let mf=new Magnifier(ooimg,obig,omask);
	mf.onmouseover();
	mf.onmouseout();
	mf.onmousemove();